<template>
  <div id="componentRencentArticle">
    <v-card>
      <v-toolbar card dense color="transparent">
        <v-toolbar-title>
          <h4 class="font-weight-light">最新文章</h4>
        </v-toolbar-title>
        <v-spacer></v-spacer>
        <v-btn icon>
          <v-icon>more_vert</v-icon>
        </v-btn>
      </v-toolbar>
      <v-divider></v-divider>
      <v-card-text class="pa-0">
        <template>
          <v-data-table :headers="headers" :items="projects" hide-actions class="elevation-0">
            <template slot="items" slot-scope="props">
              <td>{{ props.item.id }}</td>
              <td>{{ props.item.title }}</td>
              <td class="text-xs-left">{{ props.item.timeline }}</td>
              <td class="text-xs-right">
                <v-btn flat icon color="grey">
                  <v-icon small>edit</v-icon>
                </v-btn>
                <v-btn flat icon color="grey">
                  <v-icon small>share</v-icon>
                </v-btn>
              </td>
            </template>
          </v-data-table>
        </template>
        <v-divider></v-divider>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'rencent-articles',
  data () {
    return {
      headers: [
        {
          text: '#',
          align: 'left',
          sortable: false,
          value: 'id'
        },
        {
          text: '标题',
          align: 'left',
          value: 'title'
        },
        { text: '时间', value: 'timeline' },
        { text: '操作', value: 'action', align: 'right' }

      ]
    }
  },
  computed: {
    projects () {
      return [{
        id: 1,
        title: 'JWT（Json web token）认证介绍',
        timeline: '三天前'
      }, {
        id: 2,
        title: 'JWT（Json web token）认证介绍',
        timeline: '两年前'
      }, {
        id: 3,
        title: 'JWT（Json web token）认证介绍',
        timeline: '昨天'
      }]
    }
  }
}
</script>
